<template>
  <div>
    <p-modal
      title="高级查询"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      width="840px"
    >
      <div style="display:flex;">
        <div class="con left-con">
          <div class="header">
            <span class="label">过滤条件匹配</span>
            <div style="width:210px;display:inline-block;margin-left:28px;">
              <p-select
                v-model="condition"
                placeholder="请选择"
              >
                <p-select-option
                  v-for="item in conditions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </p-select>
            </div>
          </div>

          <div class="content-wrap">
            <div class="content">
              <div
                v-for="(item,index) in rows"
                :key="item.id"
                class="item"
              >
                <div style="flex:2;">
                  <p-select
                    v-model="item.filed"
                    placeholder="请选择字段"
                  >
                    <p-select-option
                      v-for="d in renderFields"
                      :key="d.prop"
                      :label="d.label"
                      :value="d.prop"
                    />
                  </p-select>
                </div>
                <div style="flex:2;">
                  <p-select
                    v-model="item.rule"
                    placeholder="请选择匹配规则"
                  >
                    <p-select-option
                      v-for="d in rules"
                      :key="d.value"
                      :label="d.label"
                      :value="d.value"
                    />
                  </p-select>
                </div>
                <div style="flex:1;">
                  <p-input
                    v-model="item.value"
                    placeholder="请输入"
                  />
                </div>
                <div class="op-btns">
                  <a
                    v-if="index==rows.length-1 && rows.length<renderFields.length"
                    type="plus-circle"
                    @click="add"
                  />
                  <a
                    v-if="index!==0"
                    type="minus-circle"
                    @click="remove(index)"
                  />
                </div>
              </div>
            </div>
            <div class="bottom">
              <p-button @click="epmtyCondition">
                清空
              </p-button>
              <div>
                <p-button
                  @click="evt=>saveCondition(conditionName)"
                >
                  保存条件
                </p-button>
                <p-button
                  type="primary"
                  @click="search"
                >
                  查询
                </p-button>
              </div>
            </div>
          </div>
        </div>
        <div class="con right-con">
          <div class="header">
            保存的查询
          </div>
          <ul class="save-condition-con">
            <li
              v-for="item in savedConditions"
              :key="item.name"
              class="save-condition-item"
              @click="initConditionBySaved(item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </p-modal>
    <p-modal
      :visible="conditionVisible"
      width="320px"
      title="保存查询条件"
    >
      <p-input
        v-model="conditionName"
        placeholder="请输入名称"
      />
    </p-modal>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    conditionKey: {
      type: String,
      default: 'high_search_condition'
    },
    fields: {
      type: Array,
      default: () => {
        return []
      }
    },
    rules: {
      type: Array,
      default: () => {
        return [
          { label: '包含', value: 1 }, { label: '不包含', value: 2 },
          { label: '大于', value: 3 }, { label: '等于', value: 4 },
          { label: '小于', value: 5 }
        ]
      }
    }
  },
  data () {
    return {
      condition: 1,
      conditions: [{
        label: 'AND(所有条件同时匹配)', value: 1
      }, {
        label: 'OR(所有条件匹配一个)', value: 2
      }],
      rows: [
        {}
      ],
      conditionName: '',
      conditionVisible: false,
      savedConditions: []
    }
  },
  computed: {
    renderFields () {
      return this.fields.filter(item => {
        return item.title
      })
    },
    mVisible: {
      get () {
        return this.visible
      },
      set (s) {
        this.$emit('update:visible', s)
      }
    }
  },
  mounted () {
    this.conditionName = ''
    this.initSavedCondition()
  },
  methods: {
    handleOk () {
      this.$emit('confirm')
    },
    handleCancel () {
      this.$emit('cancel')
    },
    initSavedCondition () {
      const savedConditionsStr = localStorage.getItem(this.conditionKey)
      if (savedConditionsStr) {
        this.savedConditions = JSON.parse(savedConditionsStr)
      }
    },
    add () {
      this.rows.push({})
    },
    remove (index) {
      this.rows.splice(index, 1)
    },
    epmtyCondition () {
      this.rows = [{}]
    },
    saveCondition (name) {
      const saveRes = this.rows.filter(item => {
        return JSON.stringify(item) !== '{}'
      })
      if (name) {
        const temp = { name: name, data: saveRes }
        const savedConditionsStr = localStorage.getItem(this.conditionKey)
        let saveConditionArr = []
        if (savedConditionsStr) {
          saveConditionArr = JSON.parse(savedConditionsStr)
        }
        saveConditionArr.push(temp)
        localStorage.setItem(this.conditionKey, JSON.stringify(saveConditionArr))
        return
      }

      if (saveRes.length === 0) {
        this.$message.info('保存的条件不能为空')
        return
      }
      this.conditionVisible = true
    },
    search () {
      this.$emit('search', this.rows)
    },
    submit () {
      this.saveCondition(this.conditionName)
      this.conditionVisible = false
      this.initSavedCondition()
    },
    initConditionBySaved (d) {
      this.rows = d.data
      this.conditionName = d.name
    },
    destroyed () {
      this.conditionName = ''
    }
  }
}
</script>

<style scoped lang="less">
.con{
  background:rgba(255,255,255,1);
  border:1px solid rgba(243,244,246,1);
  border-radius:4px;
  background:#fff;
  font-size:12px;
  /deep/.a-input__inner {
    border:none;
    background:transparent;
    font-size:12px;
  }
}
.header{
  height:32px;
  line-height: 32px;
  border-bottom:1px solid rgba(243,244,246,1);
  padding:0 16px;
  .label{
    font-weight:400;
    line-height:14px;
    color:rgba(0,0,0,1);
  }
}
.left-con{
  flex:2.4;
  margin-right:16px;
}
.right-con{
  text-align:center;
  flex:1;
  .save-condition-con{
    padding:0 10px;
    .save-condition-item{
      text-align: left;
      margin-top:10px;
      cursor: pointer;
      &:focus,&:hover{
        background:#fafafa;
      }
    }
  }
}
.content-wrap{
  .content{
    min-height: 180px;
    max-height:300px;
    overflow-y: auto;
    .item{
      display: flex;
      margin-top:8px;
      background:rgba(250,250,250,1);
    }
    .op-btns{
      width:60px;
      display: flex;
      justify-content: center;
      align-items: center;
      i:not(first-child) {
        margin-left:8px;
      }
    }
  }
  .bottom{
    display: flex;
    justify-content: space-between;
    padding:16px;
  }
}
</style>

<style lang="less">

</style>
